<template>
    <div class="cart">
        <van-nav-bar title="购物车">
        </van-nav-bar>
        <div v-if="goodList.length">
            <van-checkbox-group v-model="result" ref="checkboxGroup" class="chegroup">
                <van-checkbox :name="item.id" class="check" v-for="item in goodList">
                    <van-swipe-cell class="vanCar">
                        <van-card
                                :num="item.count"
                                :price="item.price"
                                desc="描述信息"
                                title="商品标题"
                                class="goods-card"
                                thumb="https://img.yzcdn.cn/vant/cat.jpeg"
                        />
                        <van-button
                                slot="right"
                                square
                                text="删除"
                                type="danger"
                                class="delete-button"
                        />
                    </van-swipe-cell>
                </van-checkbox>
            </van-checkbox-group>


            <van-submit-bar
                    :price=price
                    button-text="提交订单"
                    @submit="onSubmit"
            >
                <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
                <span slot="tip">
    你的收货地址不支持同城送, <span>修改地址</span>
  </span>
            </van-submit-bar>
        </div>
        <div v-else>
            购物车为空，现在去逛逛吧
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {SubmitBar, Checkbox, CheckboxGroup,NavBar,SwipeCell,Button,Card} from 'vant'

    Vue.use(SubmitBar).use(Checkbox).use(CheckboxGroup).use(NavBar).use(SwipeCell).use(Button).use(Card)
    export default {
        name: "Cart",
        components: {

        },
        methods: {
            onSubmit() {
                console.log(111)
            },
            onClickLeft() {
                this.$router.go(-1)
            },
            onClickRight() {
                Toast('提示内容');
            },
            checkAll() {
                this.check = !this.check
                this.$refs.checkboxGroup.toggleAll(this.check);
            },
        },
        data() {
            return {
                check:false,
                result:[],
                toatl:0,
                checked: false,
                price:10.00,
                goodList:[
                    {id:1,name:'毛衣',price:80.00,count:1},
                    {id:2,name:'衬衫',price:85.00,count:1},
                    {id:3,name:'裤子',price:89.00,count:1},
                    {id:4,name:'外套',price:86.00,count:0},
                    {id:5,name:'鞋子',price:87.00,count:1}
                ]
            }
        }
    }
</script>

<style scoped>
    .van-submit-bar {
        position: fixed;
        bottom: 50px;
        left: 0;
        z-index: 100;
        width: 100%;
        background-color: #fff;
        -webkit-user-select: none;
        user-select: none;
    }
    .goods-card {
        margin: 0;
        margin-bottom: 10px;
        background-color:@white;
    }

    .delete-button {
        height: 100%;
    }
    .check{
        margin-left: 6px;
    }
    .vanCar{
        width: 336px;
    }
    .chegroup{
        margin-bottom: 125px;
    }
</style>
